<template>
    <div id="main">
        <div id="top">
            <div id="top_logo">
                <img src="../assets/images/平台工程logo-浅色下.png" alt="" id="logo" texe="algin">
            </div>
            <div id="text">
                <p id="text-info">问卷调研</p>
            </div>
            <div id="headportrait">
                <img src="../assets/images/default-avatar.png" alt="" id="head">
            </div>
            <div id="name">
                <p id="name-info">{{username}}</p>
            </div>
        </div>


        <div id="center">
            <div id="center-top">
                <div id="class_name">
                    <p>{{classname}}</p>
                </div>
                <div id="class_btn">
                     <el-button size="small" type="primary" @click="dialogFormVisible = true" >新增</el-button>

                        <el-dialog title="新增任务" :visible.sync="dialogFormVisible" top="3vh" width="350px">
                            <el-form :model="form">
                                <el-form-item label="*活动名称" :label-width="formLabelWidth">
                                <el-input
                                    type="text"
                                    placeholder="请输入内容"
                                    v-model="form.name"
                                    maxlength="50"
                                    width ="100% !important"
                                    show-word-limit
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="*开始时间" :label-width="formLabelWidth">  
                                <el-date-picker
                                    v-model="form.starttime"
                                    type="date"
                                    style="width : 100%"
                                    placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="*结束时间" :label-width="formLabelWidth">
                                <el-date-picker
                                    v-model="form.endtime"
                                    type="date"
                                    style="width : 100%"
                                    placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="*调研对象" :label-width="formLabelWidth">
                                <el-select v-model="form.object" clearable  placeholder="请选择调研对象" style="width:100%">
                                    <el-option
                                    v-for="item in options1"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                                </el-form-item>
                                <el-form-item label="*调研问卷" :label-width="formLabelWidth">
                                <el-select v-model="form.info" clearable  placeholder="请选择调研对象" style="width:100%">
                                    <el-option
                                    v-for="item in options1"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                            </div>
                        </el-dialog>

                </div>
            </div>
            <div style="width: 100%;height: 0.83rem;" class="center-top">
                <div id="center-tab">
                 <el-radio-group v-model="tabPosition" type="card">
                    <el-radio-button label="任务管理" size="small">任务管理</el-radio-button>
                    <el-radio-button label="问卷库管理" size="small">问卷库管理</el-radio-button>
                </el-radio-group>
                </div>
                <div id="center-search">
                    <el-select v-model="value1" clearable  placeholder="请选择调研对象" style="margin-right: 0.16rem;">
                        <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>

                    <el-select v-model="value2" clearable  placeholder="请选择调状态" style="margin-right: 0.16rem;">
                        <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>

                    <el-input class="search-input"
                        placeholder="请输入内容"
                        v-model="input"
                        clearable>
                    </el-input>

                </div>
                    <div class="search-btn">
                        <el-button size="small" type="primary">查询</el-button>
                    </div>
            </div>


            
     
            <div id="center-info" v-show="this.tabPosition === '任务管理'">
                <el-table
                    border
                    :data="tableData"
                    style="width: 100%;font-size: 10px;"
                    :default-sort = "{prop: 'date', order: 'descending'}"
                    >
                    <el-table-column
                    prop="name"
                    width="200"
                    label="任务名称">
                    </el-table-column>
                    <el-table-column
                    prop="startdate"
                    label="开始时间"
                    sortable
                    :formatter="formatter"
                    width="110">
                    </el-table-column>
                    <el-table-column
                    prop="overdate"
                    label="结束时间"
                    :formatter="formatter"
                    sortable
                    width="110">
                    </el-table-column>
                    <el-table-column
                    prop="object"
                    label="调研对象"
                    width="90">
                    </el-table-column>
                    <el-table-column
                    prop="state"
                    label="状态"
                    width="90">
                    </el-table-column>
                    <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                            <el-button type ="text" size="small" v-if="scope.row.state != '已结束'&&scope.row.state != '已取消'">编辑</el-button>
                            <el-button type ="text" size="small">查看问卷</el-button>
                            <el-button type ="text" size="small" v-if="scope.row.state === '进行中'">取消</el-button>
                            <el-button type ="text" size="small" v-if="scope.row.state != '进行中'">删除</el-button>
                            <el-button type ="text" size="small">调研结果</el-button>
                            <el-button type ="text" size="small">分享</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            <div class="paging">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="200">
                </el-pagination>
            </div>
        </div>



        <div id="center-info" v-show="this.tabPosition === '问卷库管理'">
                <el-table
                    border
                    :data="tableData"
                    style="width: 100%;font-size: 10px;"
                    :default-sort = "{prop: 'date', order: 'descending'}"
                    >
                    <el-table-column
                    prop="name"
                    width="300"
                    label="问卷名称">
                    </el-table-column>
                    <el-table-column
                    prop="startdate"
                    label="创建时间"
                    sortable
                    :formatter="formatter"
                    width="300">
                    </el-table-column>
                    
                    <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                            <el-button type ="text" size="small" v-if="scope.row.state != '已结束'&&scope.row.state != '已取消'">编辑</el-button>
                            <el-button type ="text" size="small">查看问卷</el-button>
                            <el-button type ="text" size="small" v-if="scope.row.state === '进行中'">取消</el-button>
                            <el-button type ="text" size="small" v-if="scope.row.state != '进行中'">删除</el-button>
                            <el-button type ="text" size="small">调研结果</el-button>
                            <el-button type ="text" size="small">分享</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            <div class="paging">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="200">
                </el-pagination>
            </div>
        </div>



        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // src : requier("../static/img/平台工程logo-浅色下.png")
            username : "姓名",

            classname : '问卷调研',
            tabPosition: '任务管理',

            dialogFormVisible: false,
            form: {
                name: '',
                starttime: '',
                endtime: '',
                object: '',
                info : "",
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '',
            options1: [
                {value: '选项1',
                    label: '学生',},
                {
                    value: '选项2',
                    label: '教职工',
                }],
            options2: [
                {value: '选项1',
                    label: '待发布',},
                {
                    value: '选项2',
                    label: '进行中',
                },{
                    value: '选项3',
                    label: '已结束',
                },
                {
                    value: '选项4',
                    label: '已取消',
                }],    
            value1: '',
            value2: '',
            input: '',

            tableData: [{
                name:'2020届毕业生就业意向调研',
                startdate:'2020-02-20',
                overdate:'2020-03-20',
                object:'学生',
                state:'待发布',
            }, {
                name:'毕业生岗位变动调研',
                startdate:'2020-01-03',
                overdate:'2020-01-04',
                object:'教职工',
                state:'进行中',
            }, {
                name:'毕业工作反馈',
                startdate:'2020-01-03',
                overdate:'2020-01-03',
                object:'学生',
                state:'进行中',
            }, {
                name:'2020届毕业生就业意向调研',
                startdate:'2020-02-20',
                overdate:'2020-03-20',
                object:'学生',
                state:'已结束',
            },{
                name:'毕业生岗位变动调研',
                startdate:'2020-01-03',
                overdate:'2020-01-04',
                object:'教职工',
                state:'已取消',
            }, {
                name:'毕业工作反馈',
                startdate:'2020-01-03',
                overdate:'2020-01-04',
                object:'学生',
                state:'进行中',
            }, {
                name:'毕业工作反馈',
                startdate:'2020-01-03',
                overdate:'2020-01-04',
                object:'学生',
                state:'进行中',
            }, {
                name:'毕业工作反馈',
                startdate:'2020-01-03',
                overdate:'2020-01-04',
                object:'学生',
                state:'进行中',
            }]

        }
    },
    methods: {
        formatter(row, column) {
            return row.startdate;
        }
    }
}
</script>
<style>
#main {
    width: 19.2rem;
    height: 10.8rem;
    background: #EBEFF0;
}
#top {
    width: 19.2rem;
    height: 0.96rem;
    background: #FFFFFF;
}
#top_logo{
    margin: 0.2rem 0  0.18rem 3.55rem;
    height: 0.96rem;
    width: 2.92rem;
    float: left;
}
#logo{
    position: absolute;
    width: 2.92rem;
    height: 0.58rem;
}
#text{
    float: left;
    margin: 0.35rem 0 0.36rem 0.17rem;
}
#text-info{
    width: 0.96rem;
    height: 0.25rem;
    font-size: 0.24rem;
    font-family: Microsoft YaHei UI;
    font-weight: 400;
    color: #333333;
    line-height: 0.24rem;
    margin: 0 0 0 0.17rem;
    padding: 0 0 0 0.17rem;
    border-left: #EBEFF0 solid 0.01rem;
}
#headportrait{
    width: 0.32rem;
    height: 0.96rem;
    padding: 0.3rem 0 0 0;
    float: left;
    margin: 0 0 0 6.8rem;
}
#head{
    width: 0.32rem;
    height: 0.32rem;
    position: absolute;
}
#name{
    width: 0.33rem;
    font-size: 0.16rem;
    float: left;
    margin: 0.35rem 0 0 0.16rem;
}
#name-info{
    margin: 0;
}

#center{
    width: 12rem;
    height: 8rem;
    margin: 0 auto;
    background: #FFFFFF;
    margin-top: 0.4rem;
}

#center-top{
    height: 0.7rem;
    width: 12rem;
    border-bottom: #EBEBEB solid 0.01rem;
}

#class_name{
    width: 0.72rem;
    height: 0.18rem;
    font-size: 0.18rem;
    font-family: Microsoft YaHei UI;
    font-weight: bold;
    color: #333333;
    line-height: 0.18rem;
    margin: 0.23rem 0 0 0.25rem;
    float: left;
}
#class_name p{
    margin: 0;
}
#class_btn{
    float: left;
    line-height: 0;
    margin-left: 10.08rem;
}
#center-tab{
    list-style: none;
    font-size: initial;
    margin: 0.24rem 0 0 0.24rem;
    width: 2.4rem;
    float: left;
}
.el-radio-button__inner{
    padding: 0.09rem 0.14rem !important;
}
.center-top .el-input__inner{
    width: 1.9rem;
    height: 0.4rem;
}
.el-input__icon {
    line-height: 0.26rem;
}
#center-search{
    float: left;
    margin: 0.22rem 0 0 2rem;
    font-size: 0px;
}
.search-input{
    width: 0.16rem !important;
}
.search-btn{
    line-height: 0;
    float: left;
    margin: 0.06rem 0 0 2.13rem;
}
#center-info{
    width: 11.51rem;
    height: 4.38rem;
    /* border: 1px solid #EBEBEB; */
    border-radius: 4px;
    margin: 0 auto;
}
.el-table .el-table__cell {
    padding: 7px 0;
    }
.paging{
    width: 5.1rem;
    margin: 0 auto;
    margin-top: 25px;
    height: 0.6rem;
}    
</style>